<template>
  <div style="margin: 20px">
    <div>
      <div
        style="width: 32px;height: 32px;
      display: inline-block;padding: 4px;
      box-sizing: border-box;
      border: 1px solid #e6e6e6;
      border-radius: 4px;"
      >
        <div
          style="height: 100%;width: 100%"
          :style="{backgroundColor: color3}"
        ></div>
      </div>
    </div>
    <div v-for="(item,index) in colorList"
         style="display:flex;align-items: center"
         :key="'colorList'+index">
      <el-color-picker
        v-model="colorList[index]"
        show-alpha
        size="small"
      ></el-color-picker>
      <el-button
        icon="el-icon-plus"
        size="small"
        circle
        @click="add(index)"
      ></el-button>
      <el-button
        v-if="colorList.length>2"
        size="small"
        icon="el-icon-minus"
        circle
        @click="minus(index)"
      ></el-button>
    </div>
    <div>
      混合比例
    </div>
    <div class="block">
      <el-slider
        size="small"
        v-model="ratio"
        :min="0"
        :max="1"
        :step="0.01"
        :show-tooltip="false"
        show-input>
      </el-slider>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ColorIndex',
  data(){
    return{
      ratio: 0,
      colorList:[
        'rgba(255,0,0,1)',
        'rgba(255,255,255,1)'
      ]
    }
  },
  computed:{
    color3(){
      let result = this.colorList[0]
      for (let i = 1; i <this.colorList.length; i++) {
        let item = this.colorList[i]
        result=ColorUtils.colourBlend(result,item,this.ratio)
      }
      return result
    }
  },
  methods:{
    add(index){
      this.colorList.splice(index,0,'rgba(255,255,255,1)')
    },
    minus(index){
      this.colorList.splice(index,1)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
